<template>
  <div ref="nav" class="headerBox affix-container text-header-label fix-nav">
    <div class="header-con">
      <img class="logoImg" v-if="logoImg" :src="returnImg(logoImg.indexImg)" :alt="logoImg.indexName" @click="backHome">
      <ul class="menu-box">
        <li
          v-for="(item, index) in menuList"
          :key="index"
          :class="['menu-item', { 'active': activeUrl === item.path1 }]"
          @click.stop="handleSelect(index, item)"
          v-show="item.id !=='6' && item.id !=='7' && item.id !=='9'"
          @mouseleave="handlerMenuMouseleave"
          @mouseenter="handlerMenuMouseEnter(item,index)"
        >
          <div class="item-label text-header-label">{{ item.indexName }}</div>
          <span class="item-en text-header-describe">{{ item.indexTitle }}</span>
          <div class="sub-menu-box" v-if="item.children && item.children.length > 0">
            <ul style="height: 100%;background: rgb(238, 241, 247);">
              <li
                v-for="(sub, subIndex) in item.children"
                :key="subIndex"
                v-show="sub.id !== '201' && sub.id !== '301' && sub.id !== '401' && sub.id !== '501' && sub.id !=='503004'"
                :class="[itemIndex === subIndex && item.id == 2 ?'subActive':'',item.id == 2 ?'typeLi':'']"
                @click.stop="handleSelect(index, item,sub,subIndex)"
                @mouseenter="handlerMouseenter(subIndex,sub,item)"
              >
                <div class="sub-item-label text-header-label">{{ sub.indexTitle }}</div>
              </li>
              <div
                class="sun-menu-box"
                v-if="sunList && sunList.length>0 && item.id ==2 && showSun"
                @mouseleave="handlerMouseleave"
                style="min-height:200px"
              >
                <ul>
                  <li
                    v-for="(sub, sunIndex) in sunList"
                    :key="sunIndex"
                    @click.stop="handleSelect(index, item,sub,sunIndex,true)"
                  >
                    <div class="sub-item-label text-header-label">{{ sub.indexTitle }}</div>
                  </li>
                </ul>
              </div>
            </ul>
          </div>
        </li>
      </ul>
      <el-icon class="openDrawer" @click="openDrawer">
        <Fold/>
      </el-icon>
      <el-drawer v-model="drawer" title="I am the title" :with-header="false">
        <el-menu class="el-menu-vertical-demo">
          <template v-for="(item, index) in menuList" :key="index">
            <el-sub-menu
              v-if="item.children && item.children.length > 0"
              :class="['menu-item', { 'active': activeUrl === item.path1 }]"
              v-show="item.id !=='6' && item.id !=='7' && item.id !=='9'"
              :index="index"
            >
              <template #title>
                <div class="item-label text-header-label">{{ item.indexName }}</div>
                <span class="item-en text-header-describe">{{ item.indexTitle }}</span>
              </template>
              <el-menu-item
                :index="subIndex"
                v-for="(sub, subIndex) in item.children"
                :key="subIndex"
                v-show="sub.id !== '201' && sub.id !== '301' && sub.id !== '401' && sub.id !== '501' && sub.id !=='503004'"
                :class="[itemIndex === subIndex && item.id == 2 ?'subActive':'',item.id == 2 ?'typeLi':'']"
                @click="handleDrawSelect(index, item,sub,subIndex)"
              >
                <div class="sub-item-label text-header-label">{{ sub.indexTitle }}</div>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item
              :index="index"
              v-else
              v-show="item.id !=='6' && item.id !=='7'"
              @click="handleDrawSelect(index, item)"
            >
              <template #title>
                <div class="item-label text-header-label">{{ item.indexName }}</div>
                <span class="item-en text-header-describe">{{ item.indexTitle }}</span>
              </template>
            </el-menu-item>
          </template>
        </el-menu>
      </el-drawer>
    </div>
    <!-- :class="{ 'fix-nav': show }" 吸顶条-->
  </div>
</template>
<script>
import { defineComponent, ref, watch, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router";
import { useWindowScroll } from "@vueuse/core";
import { getNavigation, getHomeBanner, getMenuList } from "@/api/PC-Home.js";
export default defineComponent({
  setup() {
    const activeUrl = ref("");
    const router = useRouter();
    const menuList = ref([]);
    const logoImg = ref({});
    const drawer = ref(false);
    const showSun = ref(false);
    const itemIndex = ref(null);
    const sunList = ref([]);
    const handlerDrawIndex = ref(0);
    const handleSelect = (index, item, sub, subIndex, bol) => {
      // 暂时基础产品和AI 平台不开放
      // if((item && item.id == '8') || (sub && sub.id =='802001')) return
      if (bol) {
        router.push({
          path: item.path1,
          query: {
            id: item.children[itemIndex.value].id,
            productId: sub.id,
            activeIndex: subIndex
          }
        });
      } else {
        if (sub) {
          router.push({
            path: item.path1,
            query: { id: sub.id, activeIndex: subIndex }
          });
        } else {
          router.push({
            path: item.path1
          });
        }
      }
      // if(item.id == 2){
      //   return false
      // }else{
      //   console.log(item)
      //    router.push({
      //     path: item.path1,
      //     query: { id: item.id }
      //   });
      // }
      // router.push({
      //     path: item.path1,
      //     query: { id: item.id }
      //   });
    };
    const handlerMouseenter = (index, sub, item) => {
      if (sub.children && sub.children.length > 0) {
        showSun.value = true;
        sunList.value = sub.children;
        itemIndex.value = index;
        let itemChildre = item.children;
        
        nextTick(() => {
          let sunDom = document.querySelector(".sun-menu-box");
          let subDom = document.querySelector(".sub-menu-box");
          if (itemChildre.length > sunList.value.length) {
            // sunDom.style.height = `${itemChildre.length * 50}px`;
            subDom.style.height = `${itemChildre.length * 50}px`;
          } else {
            sunDom.style.height = `${sunList.value.length * 50}px`;
            subDom.style.height = `${sunList.value.length * 50}px`;
          }
        });
      } else {
        showSun.value = false;
        itemIndex.value = null;
      }

      // if (item.parentId === "202") {
      //   if (item.children.length > 0) {
      //     showSun.value = true;
      //     sunList.value = item.children;
      //     itemIndex.value = index;
      //   } else {
      //     showSun.value = false;
      //     itemIndex.value = null;
      //   }
      // }
    };
    const handlerMenuMouseEnter = (item) => {
      if (item.id == 2) {
        showSun.value = true;
        
        
        nextTick(() => {
          let subDom = document.querySelector(".sub-menu-box");
        let itemChildre = item.children;
          let sunDom = document.querySelector(".sun-menu-box");
          if (itemChildre.length > sunList.value.length) {
            // sunDom.style.height = `${itemChildre.length * 50}px`;
            subDom.style.height = `${itemChildre.length * 50}px`;
          } else {
            sunDom.style.height = `${sunList.value.length * 50}px`;
            subDom.style.height = `${sunList.value.length * 50}px`;
          }
        });
      } 
      if (item.id == 3) {
        if (item.children && item.children.length > 0) {
          let subDom = document.querySelectorAll(".sub-menu-box")[3];
          subDom.style.height = `${item.children.length * 50}px`;
        }
      }
      if (item.id == 5) {
        if (item.children && item.children.length > 0) {
          let subDom = document.querySelectorAll(".sub-menu-box")[4];
          subDom.style.height = `${(item.children.length - 1) * 50}px`;
        }
      }
      if (item.id == 4) {
        if (item.children && item.children.length > 0) {
          let subDom = document.querySelectorAll(".sub-menu-box")[2];
          subDom.style.height = `${(item.children.length) * 50}px`;
        }
      }
      if (item.id == 8) {
        if (item.children && item.children.length > 0) {
          let subDom = document.querySelectorAll(".sub-menu-box")[1];
          subDom.style.height = `${(item.children.length) * 50}px`;
        }
      }
      itemIndex.value = 0;
    };
    const handlerMenuMouseleave = () => {
      showSun.value = false;
      // sunList.value = [];
      itemIndex.value = 0;
    };
    const handlerMouseleave = () => {
      showSun.value = false;
      // sunList.value = [];
      itemIndex.value = null;
    };
    const openDrawer = () => {
      drawer.value = true;
    };
    const returnImg = url => {
      if(url){
        return process.env.VUE_APP_URL + "/" + url;
      } 
    };
    const show = ref(false); // 默认不显示
    const { y } = useWindowScroll(); // x,y 轴
    const handleDrawSelect = (index, item, sub, subIndex, bol) => {
      // console.log(index, item, sub, subIndex, bol, itemIndex);
      handlerDrawIndex.value = index;
      // if((item && item.id == '8') || (sub && sub.id =='802001')) return
      if (bol) {
        router.push({
          path: item.path1,
          query: {
            id: item.children[itemIndex.value].id,
            productId: sub.id,
            activeIndex: subIndex
          }
        });
        drawer.value = false;
      } else {
        if (sub) {
          router.push({
            path: item.path1,
            query: { id: sub.id, activeIndex: subIndex }
          });
          drawer.value = false;
        } else {
          router.push({
            path: item.path1
          });
          drawer.value = false;
        }
      }
    };
    const backHome = () =>{
      router.push("/")
    }
    watch(y, (oldVal, newVal) => {
      // 监听变化,做出判断
      newVal > 80 ? (show.value = true) : (show.value = false);
    });
    watch(
      () => router.options.history.state,
      newValue => {
        if (
          newValue.current.substring(0, newValue.current.indexOf("?")) ===
          "/articleDetail"
        ) {
          activeUrl.value = "/businessmovement";
        } else if (
          newValue.current.substring(0, newValue.current.indexOf("?")) ===
          "/customerCasePage"
        ) {
          activeUrl.value = "/solution";
        } else {
          activeUrl.value = newValue.current.substring(
            0,
            newValue.current.indexOf("?")
          )
            ? newValue.current.substring(0, newValue.current.indexOf("?"))
            : newValue.current;
        }
      },
      { immediate: true, deep: true }
    );
    onMounted(() => {
      Promise.all([getHomeBanner(), getNavigation(), getMenuList()]).then(
        res => {
          // let solutionData = null;
          // res[0].data.map(item => {
          //   if (item.id === "102") {
          //     solutionData = item.children;
          //   }
          // });
          // res[1].data.map(item => {
          //   if (item.id === "2") {
          //     item.children = solutionData;
          //   }
          // });
          menuList.value = res[1].data;
          sunList.value = res[1].data[1].children[0].children;
          console.log(menuList.value )
          res[2].data.map(item => {
            if (item.id === "7") {
              logoImg.value = item;
            }
          });
        }
      );
    });
    return {
      show,
      y,
      activeUrl,
      menuList,
      handleSelect,
      logoImg,
      returnImg,
      openDrawer,
      drawer,
      handlerMouseenter,
      handlerMouseleave,
      handlerMenuMouseleave,
      handlerMenuMouseEnter,
      showSun,
      sunList,
      itemIndex,
      handleDrawSelect,
      handlerDrawIndex,
      backHome
    };
  }
});
</script>
<style lang="scss" scoped>
.logoImg{
  cursor: pointer;
}
.openDrawer {
  display: none;
}
.headerBox {
  // width: 100%;
  height: 80px;
  // padding: 0 120px;
  box-sizing: border-box;
  background: #fff;
  width: 100%;

  .header-con {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    img {
      max-width: 320px;
    }
  }
  .menu-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;

    .menu-item {
      width: 104px;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      &:hover {
        .sub-menu-box {
          display: block;
          ul {
            li {
              max-height: 150px;
            }
          }
        }

        &::after {
          position: absolute;
          content: "";
          width: 130%;
          height: 3px;
          background: #1790ff;
          bottom: 0;
        }

        .item-label {
          font-size: 16px;
          color: #1790ff;
        }

        .item-en {
          font-size: 10px;
          color: #1790ff;
          letter-spacing: 0;
          text-align: center;
          line-height: 10px;
        }
      }

      &.active {
        &::after {
          position: absolute;
          content: "";
          width: 130%;
          height: 3px;
          background: #1790ff;
          bottom: 0;
        }

        .item-label {
          font-size: 16px;
          color: #1790ff;
        }

        .item-en {
          font-size: 10px;
          color: #1790ff;
          letter-spacing: 0;
          text-align: center;
          line-height: 10px;
        }
      }

      .item-label {
        font-size: 16px;
      }

      .item-en {
        font-size: 10px;
        letter-spacing: 0;
        text-align: center;
        line-height: 10px;
        margin-top: 8px;
      }

      .sub-menu-box {
        position: absolute;
        width: 130%;
        height: auto;
        bottom: 0;
        background: #fff;
        z-index: 1;
        top: 80px;
        display: none;
        box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        ul {
          box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
          height: 100%;
          li {
            overflow: hidden;
            max-height: 0;
            transition: max-height 500ms ease;
            cursor: pointer;
            background: #fff;
            &.typeLi {
              background: rgb(238, 241, 247);
            }
            &:hover {
              .sub-item-label {
                // background: #1790ff;
                background: rgb(238, 241, 247);
                color: #1790ff;
              }
            }

            .sub-item-label {
              width: 100%;
              height: 30px;
              line-height: 30px;
              font-size: 16px;
              padding: 10px 0;
              &.sub-active {
                // background: #1790ff;
                color: #1790ff;
              }
            }
          }
        }
        .sun-menu-box {
          position: absolute;
          top: 0;
          left: 100%;
          height: auto;
          min-height: 150px;
          width: 256px;
          background: url("../../assets/img/u122.jpg") no-repeat 100% 100% #fff;
          border-left: 1px solid #e3e7ed;
          // box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
          ul {
            box-shadow: none;
            li {
              background: transparent;
            }
          }
          .sub-item-label {
            text-align: left;
            padding-left: 20px;
          }
        }
      }
    }
  }
}

/* 固定导航 */
.fix-nav {
  position: fixed;
  top: 0;
  z-index: 999;
  box-shadow: 0px 4px 8px rgba(50, 50, 51, 0.1);
}
@media only screen and (max-device-width: 768px) {
  .openDrawer {
    display: block;
  }
  .headerBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 80px;
    padding: 0 20px;
    box-sizing: border-box;
    background: #fff;
    .header-con {
      padding: 0;
      img {
        max-width: 210px;
      }
    }
    ::v-deep .el-drawer {
      width: 100% !important;
      top: 1.5rem;
      padding-bottom: 1.5rem;
    }
    .menu-box {
      display: none;
    }
    .menu-box-mobile {
      display: flex;
      flex-direction: column;
      .menu-item {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 10px;
        cursor: pointer;

        &:hover {
          .sub-menu-box {
            ul {
              li {
                max-height: 150px;
              }
            }
          }

          &::after {
            position: absolute;
            content: "";
            width: 100%;
            height: 3px;
            background: #1790ff;
            bottom: 0;
          }

          .item-label {
            font-size: 16px;
            color: #1790ff;
          }

          .item-en {
            font-size: 12px;
            color: #1790ff;
          }
        }

        &.active {
          // &::after {
          //   position: absolute;
          //   content: "";
          //   width: 100%;
          //   height: 3px;
          //   background: #1790ff;
          //   bottom: 0;
          // }

          .item-label {
            font-size: 16px;
            color: #1790ff;
          }

          .item-en {
            font-size: 12px;
            color: #1790ff;
          }
        }

        .item-label {
          font-size: 16px;
        }

        .item-en {
          font-size: 12px;
        }

        .sub-menu-box {
          position: absolute;
          width: 100%;
          height: auto;
          bottom: 0;
          background: #fff;
          z-index: 1;
          top: 80px;

          ul {
            li {
              overflow: hidden;
              max-height: 0;
              transition: max-height 500ms ease;
              cursor: pointer;
              background: #fff;

              &:hover {
                .sub-item-label {
                  background: #1790ff;
                  color: #fff;
                }
              }

              .sub-item-label {
                width: 100%;
                height: 30px;
                line-height: 30px;
                font-size: 16px;
                &.sub-active {
                  background: #1790ff;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}
.subActive {
  border-right: 2px solid rgba(23, 144, 255, 1);
  .sub-item-label {
    color: #1790ff;
  }
}
::v-deep .el-menu {
  width: 100%;
  border: 0;
  .el-menu--inline {
    background: none !important;
  }
  .el-menu-item {
    background: none !important;
    .item-label {
      margin-right: 0.2rem;
    }
  }
  .el-sub-menu {
    .item-label {
      margin-right: 0.2rem;
    }
  }
  .active {
    .el-sub-menu__title {
      .text-header-label {
        color: #1790ff;
      }
      .text-header-describe {
        color: #1790ff;
      }
    }
  }
}
</style>